Aller au contenu principal

AR Clip SDK

Vue d’ensemble​

AR Clip permet de livrer des expériences AR via un App Clip : le contenu WebGL est streamé tandis qu’ARKit et le moteur VPS de WebAR³ assurent la localisation. Adoptez le flux Immersal : prérequis, installation, configuration de la scène, activation du VPS puis mise en ligne du build WebGL.

Prérequis​

Remarque : dans l’éditeur Unity, la plupart des API AR Clip sont protégées par Application.isEditor. Construisez en WebGL et testez depuis l’app AR Clip pour obtenir le comportement réel.

Installer le package​

  1. Ouvrez Window → Package Manager.
  2. Sélectionnez + → Add package from Git URL….
  3. Entrez https://github.com/WebAR-Studio/arclip_sdk.git et validez.

Avant d’importer, supprimez toute ancienne arborescence Assets/ARLib afin d’éviter les conflits :

error CS0433: The type 'ARLibTester' exists in both 'ARLib' and 'Assembly-CSharp'

Importer les samples​

Dans Package Manager → AR Clip → Samples :

  • Importez WebGLTemplates puis copiez le dossier résultant dans Assets/ pour le sélectionner dans Project Settings → Player → WebGL Template.
  • Importez TransparentBackground et déplacez TransparentBackground.jslib dans Assets/Plugins pour activer le rendu WebGL transparent.

Préparer la scène​

  1. Créez un GameObject vide ARClipController.
  2. Ajoutez ARLibController et assignez la caméra au champ renderCamera.
  3. Désactivez le composant Camera, définissez Clear Flags = Solid Color et utilisez la couleur RGBA(0,0,0,0).
  4. Optionnel : ajoutez ARLibTester (provenant des samples) pour simuler les événements dans l’éditeur.

Script minimal​

using UnityEngine;
using ARLib;

public class ARClipBootstrap : MonoBehaviour
{
    [SerializeField] private Camera renderCamera;

    private void OnEnable()
    {
        ARLibController.Initialized += HandleInitialized;
        ARLibController.VPSPositionUpdated += HandleVpsPose;
    }

    private void OnDisable()
    {
        ARLibController.Initialized -= HandleInitialized;
        ARLibController.VPSPositionUpdated -= HandleVpsPose;
    }

    private void Start()
    {
        ARLibController.SetRenderCamera(renderCamera);
        ARLibController.Initialize();
    }

    private void HandleInitialized()
    {
        ARLibController.EnableCamera();
        ARLibController.EnableAR();
        ARLibController.EnableSurfaceTracking("horizontal");
    }

    private void HandleVpsPose(VPSPoseData pose)
    {
        Debug.Log($"VPS pose: {pose.Position}");
    }
}

Démarrer la localisation VPS​

Configurez le VPS après l’initialisation et avant de lancer la localisation :

var settings = new VPSSettings
{
    apiKey = "your-api-key",
    locationIds = new[] { "your-location-id" }
};

ARLibController.SetupVPS(settings);
ARLibController.StartVPS();

Surveillez les événements clés :

  • ARLibController.VPSInitialized signale que le sous-système est prêt.
  • ARLibController.VPSPositionUpdated renvoie les poses localisées.
  • ARLibController.OnVPSErrorHappened fournit les messages d’erreur.

Affinez la cadence des requêtes à l’aide de SetSendPhotoDelay, SetGpsAccuracyBarrier ou SetFirstRequestDelay.

Modules de tracking​

  • Enregistrez vos images via AddTrackingImage avant d’activer le tracking. Attendez TrackedImagesArrayUpdate pour confirmer le chargement.
  • Utilisez EnableSurfaceTracking("horizontal" | "vertical" | "both") pour détecter les surfaces ; les résultats sont retournés par SurfaceTrackingUpdated.

Workflow de build et de mise en ligne​

  1. Choisir le template WebGL : dans Project Settings → Player → WebGL → Resolution and Presentation, sélectionnez le template importé.
  2. Construire : File → Build Settings → WebGL → Build.
  3. Compresser : archivez le contenu du build en veillant à ce que index.html soit à la racine.
  4. Téléverser : chargez l’archive sur https://cdn.mobile.web-ar.studio/clip/pages/zip_uploader.html.
  5. Tester : scannez le QR généré avec l’app AR Clip pour iOS (https://apps.apple.com/app/ar-clip/id6742754238).

Dépannage​

  • Pas de flux caméra : vérifiez que TransparentBackground.jslib se trouve dans Assets/Plugins et que la caméra est assignée puis désactivée.
  • Pas d’événements AR dans l’éditeur : comportement normal ; utilisez ARLibTester ou testez un build WebGL.
  • Conflits de types : supprimez l’ancien dossier ARLib avant d’importer le package.